<template>
	<view class="container">
		<!-- 收件人信息 -->
		<view class="recipient-info">
			<view class="recipient-details">
				<text class="recipient-name">王姐，15523654547</text>
				<text class="recipient-address">四川省成都市 5-012 号客福花苑</text>
			</view>
			<view class="action-buttons">
				<view class="action-btn">删除</view>
				<view class="action-btn">修改</view>
			</view>
		</view>

		<!-- 寄送统计 -->
		<view class="delivery-stats">
			<text class="stats-text">已送 5<text class="stats-number"></text> 次，剩余 <text
					class="stats-number highlight">1</text> 次</text>
		</view>

		<!-- 寄送记录列表 -->
		<view class="delivery-list">
			<view class="delivery-item" v-for="(record, index) in deliveryRecords" :key="index">
				<view class="delivery-dot"></view>
				<view class="delivery-content">
					<text class="delivery-date">{{ record.date }}</text>
					<view class="delivery-status" v-if="record.status">
						<text class="status-time">{{ record.statusTime }}</text>
						<text class="status-text">{{ record.statusText }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-action">
			<button class="qr-button" @click="generateQRCode">
				点击生成二维码
			</button>
		</view>

		<view class="scancode" v-if="showScanCode">
			<view class="scancode_container">
				<view class="title">
					分享好友扫码领礼品
				</view>
				<view class="scan_img">
					<image v-if="qrcode" :src="qrcode" mode="widthFix" class="scan_image">
					</image>
				</view>
				<view class="btn_box">
					<view class="btn" @tap="saveImage">
						保存图片
					</view>
					<button class="btn" open-type="share">
						分享
					</button>
				</view>

			</view>
			<view class="close_btn" @click="showScanCode=false">
				<uni-icons type="close" size="30" color='white'></uni-icons>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				qrcode: '',
				showScanCode: false,
				recipientInfo: {
					name: '王姐',
					phone: '15523654547',
					address: '四川省成都市 5-012 号客福花苑'
				},
				deliveryStats: {
					completed: 5,
					remaining: 1
				},
				deliveryRecords: [{
						date: '2025 年 5 月 1 日赠送 1 次'
					},
					{
						date: '2025 年 5 月 5 日赠送 1 次'
					},
					{
						date: '2025 年 5 月 20 日赠送 1 次'
					},
					{
						date: '2025 年 6 月 1 日赠送 1 次',
						status: true,
						statusTime: '运输中 09:16 01:22',
						statusText: '已离开北京分拨交付中心，发往成都市客福花苑'
					}
				]
			}
		},
		onLoad() {
			this.createCode()
		},
		onShareAppMessage() {
			return {
				title: '送你一份礼物',
				path: '/pagesA/sendDetail/sendDetail',
				imageUrl: 'http://localhost:3000/1751006223135-617010422-2.jpg'
			}
		},
		methods: {
			async saveImage() {
				if (!this.qrcode) {
					uni.showToast({
						title: '暂无二维码',
						icon: 'none'
					});
					return;
				}
				try {
					const base64Data = this.qrcode.replace(/^data:image\/\w+;base64,/, '');
					const filePath = `${wx.env.USER_DATA_PATH}/qrcode.png`;

					const fs = wx.getFileSystemManager();
					fs.writeFile({
						filePath,
						data: base64Data,
						encoding: 'base64',
						success: () => {
							wx.saveImageToPhotosAlbum({
								filePath,
								success() {
									wx.showToast({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail(err) {
									wx.showToast({
										title: '保存失败',
										icon: 'none'
									});
									console.error('保存失败', err);
								}
							});
						},
						fail(err) {
							console.error('写入临时文件失败', err);
						}
					});

				} catch (e) {
					console.error('保存失败', e);
					uni.showModal({
						title: '保存失败',
						content: '请检查网络或权限设置',
						showCancel: false
					});
				}
			},
			async createCode() {
				// const id = options.id;
				const id = 1
				request({
					url: `/api/qrcode/generate?id=${id}`,
					method: 'GET'
				}).then(res => {
					this.qrcode = res.data; // base64 图片
				});
			},
			deleteRecipient() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个收件人吗？',
					success: (res) => {
						if (res.confirm) {
							// 删除逻辑
							console.log('删除收件人');
						}
					}
				});
			},
			editRecipient() {
				uni.navigateTo({
					url: '/pages/recipient/edit'
				});
			},
			generateQRCode() {
				this.showScanCode = true
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f8f8f8;
		padding-bottom: 120rpx;
	}

	.recipient-info {
		background-color: #fff;
		padding: 40rpx;
		margin-bottom: 20rpx;
	}

	.recipient-details {
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #E8E8E8;
		padding-bottom: 40rpx;
	}

	.recipient-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		display: block;
		margin-bottom: 16rpx;
	}

	.recipient-address {
		font-size: 28rpx;
		color: #666;
		line-height: 1.4;
	}

	.action-buttons {
		display: flex;
		justify-content: flex-end;
	}

	.action-btn {
		padding: 12rpx 25rpx;
		background: #FFFFFF;
		border-radius: 23rpx;
		border: 1px solid #9F9F9F;
		margin: 0;
		margin-right: 18rpx;
	}

	.delivery-stats {
		background-color: #fff;
		padding: 30rpx 40rpx;
		margin-bottom: 20rpx;
	}

	.stats-text {
		font-size: 28rpx;
		color: #333;
	}

	.stats-number {
		font-weight: 600;
		color: #333;
	}

	.stats-number.highlight {
		color: #FF7611;
	}

	.delivery-list {
		background-color: #fff;
		padding: 20rpx 40rpx;
		position: relative;
	}

	.delivery-item {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 0;
		position: relative;
	}

	.delivery-item:not(:last-child)::after {
		content: '';
		position: absolute;
		left: 12rpx;
		top: 50rpx;
		bottom: -20rpx;
		width: 2rpx;
		background-color: #e0e0e0;
	}

	.delivery-dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #8b5cf6;
		margin-right: 30rpx;
		margin-top: 10rpx;
		flex-shrink: 0;
	}

	.delivery-content {
		flex: 1;
	}

	.delivery-date {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}

	.delivery-status {
		padding: 20rpx;
		border-radius: 12rpx;
	}

	.status-time {
		font-size: 24rpx;
		color: #5E3586;
		display: block;
		margin-bottom: 8rpx;
	}

	.status-text {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
	}

	.bottom-action {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx;
		background-color: #fff;
		border-top: 1rpx solid #e0e0e0;
	}

	.qr-button {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
		color: #fff;
		border: none;
		border-radius: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		margin: 0;
	}

	.qr-button:active {
		opacity: 0.8;
	}

	/* 按钮重置样式 */
	button::after {
		border: none;
	}

	.scancode {
		width: 100vw;
		height: 100vh;
		background-color: #00000063;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.scancode_container {
			background-image: url();
			background-size: cover;
			background-repeat: no-repeat;
			width: 580rpx;
			height: 762rpx;
			border-radius: 18rpx;
			display: flex;
			flex-direction: column;

			.title {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #48246B;
				margin: 82rpx 120rpx 68rpx 95rpx;
			}

			.scan_img {
				width: 328rpx;
				height: 328rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				margin-left: 120rpx;

				.scan_image {
					width: 268rpx;
					height: 268rpx;
				}
			}


		}

		.close_btn {
			width: 68rpx;
			height: 68rpx;
			margin-top: 50rpx;
		}
	}

	.btn_box {
		display: flex;

		.btn {
			margin-left: 20rpx;
			margin-right: 20rpx;
			height: 86rpx;
			background: #48246B;
			border-radius: 43rpx;
			text-align: center;
			line-height: 86rpx;
			font-family: Source Han Sans SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			margin-top: 80rpx;
			// padding: 20rpx 20rpx;
			flex: 1;
		}
	}
</style>